.container {



  .top{
  	background: linear-gradient(to right,#4890F7,#3374EF);
  	height: 200rpx;
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	padding: 0 30rpx;
	
	.navigate{
		display: flex;
		justify-content: space-between;
		color: white;
		.date-picker{
			
		.picker-year{
			display: flex;
			align-items: center;
			image{
				width: 30rpx;
				margin-left: 5rpx;
			}
		}
		}
		.filter{
			display: flex;
			align-items: center;
			image{
				width: 30rpx;
				margin-left: 5rpx;
			}
		}
	}
  }

	
    .box{
  	  display: flex;
  	  justify-content: space-around;
  	  background-color: white;
  	  border-radius: 10rpx;
  	  padding: 10rpx 5rpx;
  	  margin-top: 20rpx;
  	  .box-item{
  		  display: flex;
  		  image{
  			  width: 30rpx;
  			  margin-right: 10rpx;
  		  }
  		  .unit{
  			  font-size: 24rpx;
  		  }
  		  .money{
  			  margin-left: 10rpx;
  			  font-weight: bold;
  		  }
  		  .num{
  			  font-weight: bold;
  		  }
  		  .slash{
  			  color: #B0ABAB;
  			  margin: 0 10rpx;
  		  }
  	  }
    }
  

  .listBox {
	  background: white;
	  margin: 20rpx 30rpx;
	  border-radius: 10rpx;
	  .tab-header{
	  	display: flex;
font-weight: bold;
		.tab-item{
			flex:1;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #f0f5ff;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
		.line{
			width: 10rpx;
			height: 10rpx;
			background-color: #3374EF;
		}
		.active{
			background-color: white;
			color: #3374EF;
			
			
		}
	  }
    .list-wrapper {
      position: relative;
      flex: 1;
      padding: 20rpx 0;
      box-sizing: border-box;
      overflow: hidden;

      .card-wrapper {
      border-bottom: 1rpx solid #F5F5F5;
     
        padding: 20rpx;
        margin: 0 30rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 52rpx;

      .left{
      	flex:2;
      .dateBox{
      	font-weight: bold;
      }
      .detail{
      	font-size: 24rpx;
      	color: #979797;
      	display: flex;
      	align-items: center;
      	image{
      		width: 30rpx;
      	}
      }
      	
      }
      .item{
      	flex:1;
      	text-align: right;
      	.unit{
      		font-size: 24rpx;
      	}
      	.fail{
      		color: #FF5959;
      	}
		.moneyNum{
			font-weight: bold;
		}
		.success{
			border: 1rpx solid #2AB27B;
			color: #2AB27B;
			
			font-size: 22rpx;
			padding: 2rpx 5rpx;
			border-radius: 10rpx;
		}
		.fail{
			border: 1rpx solid #FF5959;
			color: #FF5959;
			
			font-size: 22rpx;
			padding: 2rpx 5rpx;
			border-radius: 10rpx;
		}
      }
      }
    }
	.empty{
	
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 0;
		image{
			width: 100rpx;
		}
	}
  }

  .popup-content {
    width: 710rpx;
    height: 100%;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    padding: 20rpx;

    .popupItem {
      margin-bottom: 40rpx;

      .title {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
      }

      .button-wrapper {
        display: flex;
        flex-wrap: wrap;
        margin-right: -16rpx;

        .button {
          width: 160rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          background: #f2f2f2;
          border-radius: 10rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: $uni-text-color;
          margin-right: 16rpx;
          margin-bottom: 10rpx;
display: flex;
align-items: center;
justify-content: center;
          &.checked {
            background: url("https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/icon-button-selected.png") no-repeat center;
            background-size: contain;
            color: $uni-color-primary;
          }
		  image{
			  width: 30rpx;
			  margin-right: 10rpx;
		  }
        }
      }

      .buttonBox {
        display: flex;
        float: right;
        padding-bottom: 30rpx;
        margin-top: 40rpx;

        .button {
          width: 120rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          border: 2rpx solid #5769af;
          border-radius: 30rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #5769af;

          &-confirm {
            background: #5769af;
            color: #ffffff;
            margin-left: 40rpx;
          }
        }
      }
    }

  }
}